<template>
  <div class="dashboard-editor-container">
    <panel-group class="content-top"/>
    <el-row :gutter="32" class="content-bottom">
      <el-col :xs="24" :sm="11" :lg="11">
        <div class="content-wrapper">
          <div class="content-title">我的农场</div>
          <el-divider/>
          <div class="monitorList">
            <div class="monitor-panel" v-for="(item,index) in list" :key="index" ref="monitorPanel">
              <EZUIKitJs v-if="show" :id="item.id" :channelNo="item.channelNo" :deviceSerial="item.deviceSerial" :width="monitorWidth"
                         :height="250"></EZUIKitJs>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="13" :lg="13">
        <div class="content-wrapper">
          <div class="content-title">土壤墒情</div>
          <el-divider/>
          <el-row :gutter="32" class="panel-group">
            <el-col :xs="24" :sm="24" :lg="12" class="card-panel-col">
              <div class="chart-title">墒情数据</div>
              <one-line-chart :chart-data="lineChartData1"/>
            </el-col>
            <el-col :xs="24" :sm="24" :lg="12" class="card-panel-col">
              <div class="chart-title">墒情数据</div>
              <one-line-chart :chart-data="lineChartData2"/>
            </el-col>
            <el-col :xs="24" :sm="24" :lg="12" class="card-panel-col">
              <div class="chart-title">墒情数据</div>
              <one-line-chart :chart-data="lineChartData3"/>
            </el-col>
            <el-col :xs="24" :sm="24" :lg="12" class="card-panel-col">
              <div class="chart-title">墒情数据</div>
              <one-line-chart :chart-data="lineChartData4"/>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import PanelGroup from './dashboard/PanelGroup'
import OneLineChart from './dashboard/OneLineChart.vue'
import {getAcquisitionInfoTime} from '@/api/equipment/acquisitionInfo'
import {DICT_TYPE, getDictData} from '@/utils/dict'
import EZUIKitJs from '@/components/EZUIKitJs'
import {getDate} from '@/utils/timeUtil'
import {debounce} from 'throttle-debounce'

export default {
  name: 'Index',
  components: {
    PanelGroup,
    OneLineChart,
    EZUIKitJs
  },
  data() {
    return {
      lineChartData1: {
        xData: [],
        yData: {}
      },
      lineChartData2: {
        xData: [],
        yData: {}
      },
      lineChartData3: {
        xData: [],
        yData: {}
      },
      lineChartData4: {
        xData: [],
        yData: {}
      },
      queryParams: {
        stationId: null,
        monitorTime: []
      },
      list: [
        {
          id: '9c055ea3298f413f889deef240807fb0',
          channelNo: 1,
          deviceSerial: 'L16595996'
        },
        {
          id: 'dde1086f119740ad9af2aed8acf57adb',
          channelNo: 2,
          deviceSerial: 'L16595996'
        },
        {
          id: 'f2ccd2e008a745e0a6fbe9848ced695e',
          channelNo: 3,
          deviceSerial: 'L16595996'
        },
        {
          id: '23ad8952cfde4055b1d6c53428021aa2',
          channelNo: 4,
          deviceSerial: 'L16595996'
        },
        {
          id: 'cffefd152fd04fe096cda4c97ffa5c09',
          channelNo: 5,
          deviceSerial: 'L16595996'
        },
        {
          id: '64314e38654842359acd3d8a078b2a70',
          channelNo: 6,
          deviceSerial: 'L16595996'
        }
      ],
      monitorWidth: 0,
      show: false
    }
  },
  created() {
    this.queryParams.monitorTime[0] = getDate('thisMonth').startTime + '00:00:00'
    this.queryParams.monitorTime[1] = getDate('thisMonth').endTime + '23:59:59'
    this.queryParams.stationId = '861551053372736'
  },
  mounted() {
    this.getData()
    let monitorPanel = this.$refs.monitorPanel[0];
    this.monitorWidth = monitorPanel.offsetWidth;
    window.addEventListener("resize", this.resizeFn);
    this.show = true;
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.resizeFn);
  },
  methods: {
    getData() {
      getAcquisitionInfoTime(this.queryParams).then(response => {
        let lineChartData = {
          xData: [],
          yData: {}
        }
        //Object转Map
        let map = new Map(Object.entries(response.data))
        //按key（时间先后）排序
        let sorted = new Map(Array.from(map).sort(([a], [b]) => a.localeCompare(b)))
        sorted.forEach((item, key) => {
          let timeKey = this.parseTime(key)
          lineChartData.xData.push(timeKey)
          item.map(t => {
            let arr = [106, 107, 147, 154]
            if (arr.indexOf(t.enum) !== -1) {
              if (!lineChartData.yData[t.enum]) {
                lineChartData.yData[t.enum] = []
              }
              lineChartData.yData[t.enum].push({
                name: getDictData(DICT_TYPE.EQUIPMENT_ACQUISITION_INFO_E_NUM, t.enum)['label'],
                num: t.evalue
              })
            }
          })
        })
        this.lineChartData1 = {
          xData: lineChartData.xData,
          yData: {
            0: lineChartData.yData[106]
          },
          lineColor: '#F56C6C'
        }
        this.lineChartData2 = {
          xData: lineChartData.xData,
          yData: {
            0: lineChartData.yData[107]
          },
          lineColor: '#409EFF'
        }
        this.lineChartData3 = {
          xData: lineChartData.xData,
          yData: {
            0: lineChartData.yData[147]
          },
          lineColor: '#67C23A'
        }
        this.lineChartData4 = {
          xData: lineChartData.xData,
          yData: {
            0: lineChartData.yData[154]
          },
          lineColor: '#E6A23C'
        }
      })
    },
    resizeFn: debounce(1000, function () {
      this.show = false;
      this.$nextTick(() => {
        let monitorPanel = this.$refs.monitorPanel[0];
        this.monitorWidth = monitorPanel.offsetWidth;
        this.show = true;
      });
    }),
  }
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 24px;
  background-color: rgb(240, 242, 245);
  position: relative;
  min-height: calc(100vh - 86px);

  .content-wrapper {
    background: #fff;
    padding: 20px 30px;
    border-radius: 8px;

    .content-title {
      border-left: 6px solid #4362ff;
      padding-left: 4px;
      font-size: 18px;
      font-weight: bold;
    }

    .monitorList{
      display: flex;
      flex-flow: wrap;

      .monitor-panel {
        width: calc((100% + 20px) / 2 - 20px);
        margin-right: 20px;
        margin-bottom: 20px;
        overflow: hidden;

        &:nth-child(2n) {
          margin-right: 0px;
        }
      }
    }
    .chart-title {
      font-size: 18px;
      font-weight: bold;
    }
    .panel-group {
      .card-panel-col {
        padding: 15px 0;
      }
    }
  }
}

@media (max-width: 1024px) {
  .content-wrapper {
    padding: 8px;
  }
}
</style>
